import React from "react";

class MyMenu extends React.Component {
  // es7 类的属性的写法
  state = {
    menuList: [
      {id:1,m_name:'权限管理',m_url:'',m_componentName:'',submenus:[
        {id:10,m_name:'添加权限',m_url:'',m_componentName:'',submenus:[]},
        {id:11,m_name:'管理权限',m_url:'',m_componentName:'',submenus:[]}
      ]},
      {id:2,m_name:'用户管理',m_url:'',m_componentName:'',submenus:[]},
      {id:3,m_name:'角色管理',m_url:'',m_componentName:'',submenus:[]},
      {id:4,m_name:'医生管理',m_url:'',m_componentName:'',submenus:[]}
    ]
  }

  render(){
    // map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。
    // 数组在react,会自动解包。 [1,2,3] => 123,
    // 循环渲染数据
    const menu = (
      <ul>
       { 
      // map()返回的数组 [<li></li>,<li></li>,<li></li>,<li></li>,]，最好在自动解包为react元素
        this.state.menuList.map(el=>{
          return (
          <li key={el.id}>
            {el.m_name}
            
            {/* 子菜单 */}
            {
              el.submenus.map(item=>{
                return (<div key={item.id}>{item.m_name}</div>)
              })
            }
          </li>
          )
        })
       
       }
        
      </ul>
    );

    /* 
    const arr =  this.state.menuList.map(el=>{
          return (<li key={el.id}>{el.m_name}</li>)
        });

     const menu = (
      <ul>
       {  arr }        
      </ul>
    );
    */
    return menu;
  }
}

export default MyMenu;